<template>
    <div class="message-wrapper" :class="message.sender">
        <div class="message-avatar">
            <img :src="message.sender === 'user' ? '/api/placeholder/36/36?text=U' : '/api/placeholder/36/36?text=A'"
                :alt="message.sender === 'user' ? '用户头像' : 'AI头像'" />
        </div>
        <div class="message-content">
            <div class="message-header">
                <span class="sender-name">{{ message.sender === 'user' ? '您' : '小盟' }}</span>
                <span class="message-time">{{ message.timestamp }}</span>
            </div>
            <div class="message-body" :class="{ 'message-ai': message.sender === 'assistant' }">
                <div v-html="formattedContent"></div>
            </div>
            <div class="message-actions" v-if="message.sender === 'assistant'">
                <el-button size="small" @click="emit('regenerate', message)" title="重新生成">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </el-button>
                <el-button size="small" @click="emit('speak', message.content)" title="朗读">
                    <el-icon>
                        <Microphone />
                    </el-icon>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import { Refresh, Microphone } from '@element-plus/icons-vue';
import { marked } from 'marked';

const props = defineProps({
    message: {
        type: Object,
        required: true
    }
});

const emit = defineEmits(['regenerate', 'speak']);

const formattedContent = computed(() => {
    if (props.message.content) {
        // Use `marked` to convert markdown to HTML
        return marked(props.message.content);
    }
    return '';
});

</script>

<style scoped>
.message-wrapper {
    display: flex;
    margin-bottom: 20px;
    width: 100%;
}

.message-wrapper.assistant {
    justify-content: flex-start;
}

.message-wrapper.user {
    justify-content: flex-end;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px;
}

.message-avatar img {
    width: 100%;
    height: 100%;
}

.message-content {
    max-width: 70%;
}

.message-header {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.message-wrapper.user .message-header {
    text-align: right;
}

.message-body {
    padding: 10px 15px;
    border-radius: 12px;
    background-color: #f0f2f5;
    line-height: 1.6;
}

.message-wrapper.user .message-body {
    background-color: #409eff;
    color: white;
}

.message-actions {
    margin-top: 8px;
    display: flex;
    gap: 5px;
    visibility: hidden;
}

.message-wrapper:hover .message-actions {
    visibility: visible;
}
</style>
<style>
/* Global styles for markdown rendering from `marked` */
.message-body p {
    margin: 0 0 10px 0;
}

.message-body p:last-child {
    margin-bottom: 0;
}

.message-body h1,
.message-body h2,
.message-body h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}

.message-body ul,
.message-body ol {
    padding-left: 20px;
}

.message-body pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-body code {
    font-family: 'Courier New', Courier, monospace;
}

.message-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    border: 1px solid #dfe6ec;
}

.message-body th,
.message-body td {
    border: 1px solid #dfe6ec;
    padding: 8px;
    text-align: left;
}

.message-body th {
    background-color: #f2f6fc;
}
</style>